<template>
	<view class="searchPage">
		<!-- <u-navbar :title="realname?realname:''" leftIconColor="#fff" :autoBack="true"  :bgColor="bgColor" :titleStyle="titleStyle"></u-navbar> -->
		<view class="indexPage" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
			<view class="page">
				<view class="">
					<view class="search">
						<!-- <image src="../../static/images/whiteBack.png" mode="widthFix" class="backIcon" @click="back"></image> -->
						<u-search height="37" bgColor="#fff" shape="round" :showAction="false"
							@search="search"></u-search>
						<!-- <view class="fabu" @click="showreleaseDia">
							<image src="@/static/images/fabu_icon.png" mode="widthFix"></image>
							<span>发布</span>
						</view> -->
					</view>
					<view class="nav">
						<view class="navTabBox">
							<view class="longTab">
								<scroll-view scroll-x="true" style="white-space: nowrap; display: flex"
									scroll-with-animation :scroll-left="tabLeft">
									<view class="longItem" :style="'width:' + isWidth + 'px'" :data-index="index"
										:class="index === currentTab ? 'click' : ''" v-for="(item, index) in tabTitle"
										:key="index" :id="'id' + index" @click="longClick(index)">
										{{ item.name }}
									</view>
									<view class="underlineBox"
										:style="'transform:translateX(' + isLeft + 'px);width:' + isWidth + 'px'">
										<view class="underline"></view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
					<!-- 佔位 -->
					<view class="defaultBox" :style="{ height: defaultHeight }"></view>
					<refresh ref="refresh" @isRefresh="isRefresh"></refresh>
					<swiper class="swiperBox" :current="currentTab" @change="swiperTab">
						<swiper-item v-for="(listItem, listIndex) in tabTitle" :key="listIndex">
							<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1"
								scroll-with-animation :scroll-into-view="toView">
								<view class="content" v-if="listItem.listData.length > 0">
									<view class="card" v-for="(item, index) in listItem.listData" :key="index">
										<new-item @delOver="delOver" @share="showShareDia" :isMylife="true" :new="item"  :newIndex="index" :ispinglun="true"></new-item>
									</view>
								</view>

								<nodata top="30%" text="没有数据 ~" v-if="listItem.listData.length == 0 "></nodata>
								<view class="nomore" v-if="listItem.lastDocId == '' && listItem.listData.length > 0">
									没有更多了 ~
								</view>
								<view style="width: 100%;height: 500rpx;opacity:0;">底部占位盒子</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
				<u-popup :show="releaseDia" round="20" @close="releaseDia = false">
					<release ref="release" @closeDia="closeDia" @toDraft="toDraft" :isMylife="true"></release>
				</u-popup>

			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<share @closeDia="$refs.popup.close()"></share>
		</uni-popup>
	</view>
</template>

<script>
	const util = require('@/common/refresh.js');
	import newItem from '@/components/new-item.vue';
	import release from '@/components/release.vue';
	import refresh from '@/components/refresh.vue';
	import share from '@/components/share/share.vue'
	export default {
		components: {
			refresh,
			newItem,
			release,
			share
		},
		data() {
			return {
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				loadingOver: false,
				releaseDia: false,
				toView: '', //回到顶部id
				currentPage: 'longIndex',
				currentTab: 0, //sweiper所在页
				pages: [1, 1, 1, 1, 1, 1, 1, 1, 1], //第几页存储
				tabTitle: [],
				listData: [],
				defaultHeight: '',
				query: {
					pageSize: 10,
					isDraft: false,
					lastDocId: '',
					categoryIds: []
				},
				//导航栏
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0,
				menberdata: '',
				checkShareItem: {},
				familyMemberId: '',
				realname: '',
				navtop: 0
			};
		},
		onShow() {
			let lifeneedRefresh = uni.getStorageSync('lifeneedRefresh') ? uni.getStorageSync('lifeneedRefresh') : ''
			if (lifeneedRefresh == 1) {
				this.releaseDia = false
				this.getAllCategories()
				uni.setStorageSync('lifeneedRefresh', '')
			}

		},
		created(e) {
			this.getAllCategories();

			const {
				safeAreaInsets
			} = uni.getSystemInfoSync()
			this.navtop = safeAreaInsets.top + 44
		},
		methods: {
			showreleaseDia() {
				this.releaseDia = true
				this.$nextTick(() => {
					this.$refs.release.init(this.familyMemberId)
				})
			},
			init(familyMemberId, username, realname) {
				console.log('lifeindex init username ', username);
				this.familyMemberId = familyMemberId
				this.realname = realname

				if (username) {
					this.query.username = username
					this.getData(this.currentTab, 1);
				}
				
			},
			delOver(index) {
				this.getData(this.currentTab, 1);
				// this.$Show.show('暂不支持')
			},
			showShareDia(item) {
				this.checkShareItem = item
				this.$refs.popup.open('bottom')
				// this.$Show.show('暂不支持')
			},
			// 分享到朋友圈
			onShareTimeline() {
				let id = this.checkShareItem.docId;
				let that = this
				let data = {
					title: that.checkShareItem.title,
					path: `/pages/news/details?id=${id}&showHome=1`,
					imageUrl: that.checkShareItem.posterUrl,
				}
				return data
			},
			// 分享给好友
			onShareAppMessage(options) {

				var that = this;
				let id = that.checkShareItem.docId;
				console.log(that.checkShareItem)
				var shareObj = {
					title: that.checkShareItem.title,
					desc: '',
					path: `/pages/news/details?id=${id}&showHome=1`,
					imageUrl: that.checkShareItem.posterUrl,
				}

				return shareObj;
			},
			back() {
				uni.navigateBack()
			},
			menberUser() {
				if (this.menberdata) {
					this.$api.acceptInvite(this.menberdata).then(res => {
						this.$Show.show('家庭加入成功')
						this.menberdata = ''
						this.getAllCategories()
					})
				}

			},
			// 获取导航栏信息
			getAllCategories() {
				let tabBars = [{
					name: '全部',
					id: ''
				}];
				this.$api.getAllLifeCategories().then(res => {
					if (res) {
						for (let i in res) {
							tabBars.push({
								name: res[i],
								id: i
							});
						}
						this.tabTitle = tabBars;
						this.tabTitle.forEach(item => {
							item.listData = [], item.isgetData = false, item.lastDocId = ''
						})
						//设置导航栏宽度
						this.setNavwidth();
						// this.getData(this.currentTab);
					}
				});
			},
			setNavwidth() {
				var that = this;
				let screenWidth = window.innerWidth;


				const eWidth = screenWidth * 0.6
				// 获取设备宽度
				if (that.tabTitle.length <= 5) {
					that.isWidth = eWidth / that.tabTitle.length; //宽度除以导航标题个数=一个导航所占宽度
				} else {
					that.isWidth = eWidth / 8;
				}
			},

			search(e) {
				if (e) {
					this.query.searchContent = e
				} else {
					this.query.searchContent = ''
				}

				this.getData(this.currentTab, 1);
			},
			getData(index, type) {
				// 记得打开 生活是必须绑定了用户才会有的，别人不能替你添加生活，所以如果没有绑定的话，也就不用请求了
				if (!this.query.username) {
					return
				}
				uni.showLoading({
					title: '加载中...'
				});
				this.loadingOver = false
				if (type == 1) {
					this.query.lastDocId = ''
				} else {
					console.log('getData this.tabTitle', this.tabTitle);
					if (this.tabTitle[this.currentTab].lastDocId) {
						this.query.lastDocId = this.tabTitle[this.currentTab].lastDocId
					}
				}


				this.$api.queryLives(this.query).then(res => {
					if (type == 1) {
						this.tabTitle[this.currentTab].listData = res.list;
						this.$refs.refresh.endAfter();
					} else {
						this.tabTitle[this.currentTab].listData = [...this.tabTitle[this.currentTab].listData, ...
							res.list
						];

					}

					if (this.tabTitle[this.currentTab].listData.length > 0) {
						this.tabTitle[this.currentTab].isgetData = true
					}
					if (res.lastDocId) {
						this.tabTitle[this.currentTab].lastDocId = res.lastDocId;
					} else {
						this.tabTitle[this.currentTab].lastDocId = ''
					}

					uni.hideLoading();
					this.loadingOver = true
					console.log('after queryLives getData',this.tabTitle);
				});
			},
			// 导航栏点击
			longClick(index) {
				if (this.tabTitle.length > 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth; //设置下划线位置
				}
				this.currentTab = index; //设置导航点击了哪一个
				this.isLeft = index * this.isWidth;
				this.changeTab(index);
			},
			toTop() {
				this.toView = '';
				setTimeout(() => {
					this.toView = 'top' + this.currentTab;
				}, 10);
			},
			closeDia() {
				this.releaseDia = false
			},
			changeTab(index) {

				if (index == 0) {
					this.query.categoryIds = [];
				} else {
					this.query.categoryIds = [this.tabTitle[this.currentTab].id];
				}

				if (this.tabTitle[index].listData.length > 0 && this.tabTitle[index].isgetData == true) {
					console.log('this.tabTitle:' + this.tabTitle + '已经有数据了，无需加载');
					return
				} else {
					this.toTop()
				}

				this.getData(index, 1);
				// this.listData = [];
				// this.query.lastDocId = '';
				console.log(this.currentTab);
			},
			// swiper 滑动
			swiperTab: function(e) {
				var index = e.detail.current; //获取索引
				this.longClick(index);
			},
			// 加载更多 util.throttle为防抖函数
			lower1: util.throttle(function(e) {
				console.log(`加载${this.currentTab}`); //currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
				if (this.tabTitle[this.currentTab].lastDocId) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					this.getData(this.currentTab);
				} else {
					console.log('this.tabTitle:' + this.currentTab + ',已没有更多数据了，无需加载更多');
				}
			}, 300),
			// 刷新touch监听
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			isRefresh() {
				this.tabTitle[this.currentTab].lastDocId = ''
				this.getData(this.currentTab, 1);
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/news/mylifesearch'
				});
			},
			toDraft() {
				uni.navigateTo({
					url: '/pages/draft/index?isMylife=1'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.barHeight {
		height: var(--status-bar-height);
		background-color: #de4849;
	}

	.fixedTop {
		width: 100%;
		position: fixed;
		top: 0;
		background-color: #fff;
		z-index: 100;

		.backIcon {
			margin-right: 10rpx;
			width: 40rpx;
		}
	}

	.swiperBox {
		height: calc(100vh);
	}

	.search {
		background-color: #de4849;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 30rpx 30rpx 30rpx;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		width: 100%;
		z-index: 100;

		.fabu {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-left: 30rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			span {
				font-size: 25rpx;
				color: #fff;
			}
		}
	}

	.indexPage {
		width: 100%;
		font-size: 28upx;
		min-height: 100vh;
		overflow: hidden;
		color: #6b8082;
		position: relative;
		background-color: #f6f6f6;
	}

	.content {
		width: 100%;

		.card {
			margin-bottom: 20rpx;
		}
	}

	.nav {
		color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;

		.navTabBox {
			width: 100%;

			.click {
				color: #de4849 !important;
				font-weight: bold;
			}

			.longTab {
				width: 100%;

				.longItem {
					height: 90upx;
					display: inline-block;
					line-height: 90upx;
					text-align: center;
					color: #999;
				}

				.underlineBox {
					height: 3px;
					width: 20%;
					display: flex;
					align-content: center;
					justify-content: center;
					transition: 0.5s;

					.underline {
						width: 84upx;
						height: 4px;
						background-color: #de4849;
					}
				}
			}
		}
	}
</style>